<template>
  <div>
    <div class="routerMsg">{{ routerMsg }}</div>
    <div class="container">
      <div class="companyTitle">
        <div class="backBtn" @click="backGeneral">返 回</div>
        {{ enterpriseName }}
      </div>
      <div class="dictTab">
        <div
          @click="chooseDict('钢铁企业数据字典')"
          :class="[
            'dictItem',
            { dictItemActive: nowDict === '钢铁企业数据字典' }
          ]"
        >
          钢铁企业数据字典
        </div>
        <div
          @click="chooseDict('铝加工（深井铸造）企业数据字典')"
          class="dictItem"
          :class="{
            dictItemActive: nowDict === '铝加工（深井铸造）企业数据字典'
          }"
        >
          铝加工（深井铸造）企业数据字典
        </div>
        <div
          @click="chooseDict('粉尘涉爆企业数据字典')"
          class="dictItem"
          :class="{
            dictItemActive: nowDict === '粉尘涉爆企业数据字典'
          }"
        >
          粉尘涉爆企业数据字典
        </div>
        <div
          @click="chooseDict('矿山企业数据字典')"
          class="dictItem"
          :class="{
            dictItemActive: nowDict === '矿山企业数据字典'
          }"
        >
          矿山企业数据字典
        </div>
        <div
          @click="chooseDict('危化品企业数据字典')"
          class="dictItem"
          :class="{
            dictItemActive: nowDict === '危化品企业数据字典'
          }"
        >
          危化品企业数据字典
        </div>
        <div
          @click="chooseDict('有限空间企业数据字典')"
          class="dictItem"
          :class="{
            dictItemActive: nowDict === '有限空间企业数据字典'
          }"
        >
          有限空间企业数据字典
        </div>
      </div>
      <dustCompany v-show="nowDict === '粉尘涉爆企业数据字典'"></dustCompany>
      <steelCompany v-show="nowDict === '钢铁企业数据字典'"></steelCompany>
      <!-- <mineCompany v-show="nowDict === '矿山企业数据字典'"></mineCompany> -->
      <!-- <dangerCompany v-show="nowDict === '危化品企业数据字典'"></dangerCompany> -->
      <finiteSpace v-show="nowDict === '有限空间企业数据字典'"></finiteSpace>
    </div>
  </div>
</template>

<script>
import dustCompany from './components/dustCompany.vue'
import steelCompany from './components/steelCompany.vue'
// import mineCompany from './components/mineCompany.vue'
// import dangerCompany from './components/dangerCompany.vue'
import finiteSpace from './components/finiteSpace.vue'
export default {
  name: 'corporatePersonalityDataDetail',
  props: {},
  components: {
    dustCompany,
    steelCompany,
    // mineCompany,
    // dangerCompany,
    finiteSpace
  },
  data () {
    return {
      routerMsg: '',
      nowDict: '有限空间企业数据字典',
      enterpriseName: ''
    }
  },
  created () {
    this.routerMsg = this.$route.meta.title
    this.enterpriseName = this.$route.query.enterpriseName
  },
  methods: {
    chooseDict (e) {
      this.nowDict = e
    },
    backGeneral () {
      this.$router.push('/generalInformation')
    }
  },
  mounted () {},
  watch: {},
  computed: {},
  filters: {}
}
</script>

<style scoped lang="scss">
.routerMsg {
  padding: 20px;
  color: #999999;
  font-size: 14px;
}
.container {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
 
  padding: 20px 25px;
  .companyTitle {
    color: #303133;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: 35px;
    .backBtn {
      position: absolute;
      left: 0;
      top: -10px;
      border: 1px solid #269e8f;
      color: #269e8f;
      width: 78px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-weight: normal;
      font-size: 12px;
      border-radius: 3px;
      cursor: pointer;
    }
  }
  .dictTab {
    display: flex;
    color: #909399;
    border-bottom: 1px solid #269e8f;
    height: 40px;
    margin-bottom: 10px;
    .dictItem {
      margin-right: 31px;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .dictItemActive {
      cursor: pointer;
      padding: 0 10px;
      height: 39px;
      color: #269e8f;
      border: 1px solid #269e8f;
      border-bottom: 1px solid #fff;
      background-color: #fff;
      font-weight: 500;
    }
  }
}
</style>
